﻿<template>
    <div>
        <Toolbar class="toolbar" :editor="editorRef" :defaultConfig="toolbarConfig"></Toolbar>
        <Editor
            style="height: 500px"
            class="r"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            @onCreated="editorHandleCreated"
        />
        <div style="margin-top: 20px; display: flex; justify-content: space-around">
            <van-button type="primary" @click="getHtml">getHtml</van-button>
            <van-button type="success" @click="setHtml">setHtml</van-button>
            <van-button type="warning" @click="setImg">setImg</van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, shallowRef } from 'vue';
// @ts-ignore
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import type { IToolbarConfig } from '@wangeditor/editor';

const editorRef = shallowRef();

const valueHtml = ref('');

const toolbarConfig = ref<Partial<IToolbarConfig>>({});

const editorHandleCreated = (editor: any) => {
    editorRef.value = editor;

    // console.log(editorRef.value.getAllMenuKeys());
};

onMounted(() => {
    toolbarConfig.value.toolbarKeys = [
        // 菜单 key
        'bold',
        'bulletedList',
        'numberedList',
        'uploadImage',
    ];
});
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            fieldName: 'file',
            server: '/api/upload/test',
            maxFileSize: 10 * 1024 * 1024, // 10M
            // 单个文件上传成功之后
            onSuccess(file: File, res: any) {
                // TS 语法
                // onSuccess(file, res) {          // JS 语法
                console.log(`${file.name} 上传成功`, res);
            },
        },
    },
};

const getHtml = () => {
    console.log(editorRef.value.getHtml());
};

const setHtml = () => {
    editorRef.value.setHtml(
        '<p><img src="http://192.168.10.14:8080/uploads/test/ay0ryhizqdakbrfpl41113v19.png" style=""/></p>'
    );
};

const setImg = () => {
    editorRef.value.dangerouslyInsertHtml(
        '<p><img src="http://192.168.10.14:8080/uploads/test/ay0ryhizqdakbrfpl41113v19.png" alt="yyy" data-href="zzz" style=""/></p>'
    );
};
</script>

<style scoped lang="scss"></style>
